<template>
	<div class="rining-duration-container">
		<el-dialog title="进电振铃时长设置" :visible.sync="showRingingDuration" width="408px" :before-close="cancelRingDuration" custom-class="ringDuration-dialog" style="margin-top: 20vh">
			<el-form :model="form" :rules="rules" ref="ringDurationForm" class="demo-ruleForm">
				<el-form-item label="" prop="ringDuration">
					<el-input
						v-model="form.ringDuration"
						placeholder="请输入5到99999数字"
						min="5"
						maxlength="5"
						type="number"
						@mousewheel.native.prevent
						@keyup.native="prevent($event)"
						@input="checkNum(value)"
						id="input"
					></el-input>
					<span class="ring-time">秒</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelRingDuration" class="cancel-btn">取消</el-button>
				<el-button type="primary" @click="saveRingDuration" class="ok-btn">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: '',
	components: {},
	props: {
		showRingingDuration: {
			type: Boolean,
			require: true,
			default: () => false
		},
		ringTime: {
			type: Number,
			require: true,
			default: () => 0
		}
	},
	data() {
		const validateNumber = (rule, value, callback) => {
			// console.log(value, 'validateNumber:', value.length);
			if (!value) {
				return callback();
			} else if (value.length > 5 || value < 5) {
				return callback(new Error('请输入5到99999数字'));
			}
			return callback();
		};
		return {
			form: {
				ringDuration: ''
			},
			rules: {
				ringDuration: [
					{ required: true, message: '*请输入振铃时长', trigger: 'blur' },
					{ validator: validateNumber, trigger: 'blur' }
				]
			}
		};
	},
	watch: {
		ringTime: {
			handler(newVal, oldVal) {
				// console.log('ringTime', newVal, oldVal);
				this.form.ringDuration = newVal;
			},
			deep: true
		}
	},
	mounted() {
		this.form.ringDuration = this.ringTime;
		// console.warn(this.ringTime, ' this.ringTime', this.form.ringDuration);
	},
	methods: {
		cancelRingDuration() {
			this.$emit('cancelRingDuration');
			if (this.form.ringDuration) {
				this.form.ringDuration = '';
			}
			// eslint-disable-next-line vue/no-mutating-props
			this.ringTime = this.form.ringDuration;
		},
		saveRingDuration() {
			this.$refs['ringDurationForm'].validate(valid => {
				if (valid) {
					this.$emit('saveRingDuration', this.form.ringDuration);
				} else {
					console.error('error submit!!');
					return false;
				}
			});
		},
		// input框只能输入整数，获取键盘码
		prevent(e) {
			let keynum = window.event ? e.keyCode : e.which;
			if (keynum === 189 || keynum === 190 || keynum === 109 || keynum === 110) {
				e.target.value = '';
			}
		},
		checkNum(val) {
			// console.warn(val, 'checkNum');
			document.getElementById('input').value = val >= 0 ? val : 0;
		}
	}
};
</script>

<style lang="less" scoped>
.rining-duration-container {
	.ring-time {
		padding-left: 14px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 24px;
		margin-top: 5px;
		display: inline-block;
	}
}
</style>
<style lang="less">
.rining-duration-container {
	.el-dialog__header {
		border-bottom: 1px solid #eee;
	}
	.el-input {
		width: 280px;
		height: 32px;
	}
	[type='number']::-webkit-inner-spin-button {
		display: none;
	}
}
</style>
